<template>
    <div class="add-role">
        <el-dialog width="30%" :title="'新增人员角色'" :visible.sync="dialogVisible">
            <div class="item-complete">
                <span>人员账号：</span>
                <el-select
                    size="mini"
                    v-model="formInline.username"
                    clearable
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键字"
                    :remote-method="querySearchAsync1"
                    :loading="loading">
                    <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="item-complete">
                <span>角色类型：</span>
                <el-select size="mini" v-model="formInline.roleId" clearable placeholder="请选择类型">
                    <el-option v-for="(item,index) in authorityList" :key="index"
                        :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
           
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="submitForm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { alertMessage } from "@/config/myUtil";
import { getByAdOrNmData ,adduserAuthorityData } from "@/api/getData";
export default {
    name:"addrole",
    props:{
        authorityList:{
            type:Array,
            default:[],
        } 
    },
    data(){
        return {
            loading:false,
            options1:[],
            dialogVisible:false,
            formInline:{
                username:"",
                roleId:""
            }
        }
    },
    methods:{
        changeStatus(){
            this.dialogVisible = true;
        },
        async querySearchAsync1(queryString){
            try {
                if(queryString !== ''){
                    this.loading = true
                    let data = await getByAdOrNmData({ key: queryString });
                    data.map((item)=>{
                        item.label = `${item.userNm}—${item.deptNm}`;
                        item.value = `${item.ad}`;
                    });
                    this.loading = false;
                    this.options1 = data;
                }else{
                    this.options1 = [];
                }
            } catch (error) {
                console.log(error)
            }
        },
        async submitForm(){
            try {
                var tf = this.formInline;
                if(tf.username && tf.roleId){
                    let data = await adduserAuthorityData({
                        id:tf,
                        role:null,
                    });
                    if(data == 1){
                        this.dialogVisible = false;
                        this.$emit("updataList");
                        alertMessage("提交成功");
                    }
                }else{
                    alertMessage("请选择人员和角色类型","warning")
                }
            } catch (error) {
                console.log(error)
            }
        }
    }
}
</script>